<template>
  <hips-view sub-header-fixed>
    <hips-nav-bar
      slot="header"
      title="Radio 单选框组"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <hips-tabs
      slot="sub-header"
      v-model="active"
    >
      <hips-tab title="标准用法" />
      <hips-tab title="Dsx用法" />
    </hips-tabs>

    <div v-show="!active">
      <demo-block title="基本用法">
        <hips-radio-group
          v-model="selected"
          :options="options"
        />        
      </demo-block>

      <demo-block title="设置禁用">
        <hips-radio-group
          v-model="selected2"
          :options="options2"
          icon-position="right"
        />        
      </demo-block>

      <demo-block title="水平排列">
        <hips-radio-group
          v-model="selected3"
          :options="options3"
          :horizontal="true"
        />        
      </demo-block>

      <demo-block title="使用默认插槽">
        <hips-radio-group>
          <hips-radio
            v-for="(option, index) in options4"
            :key="index"
            v-model="selected4"
            :option="option"
          >
            <span>{{ option.text }}</span>
          </hips-radio>
        </hips-radio-group>        
      </demo-block>

      <demo-block title="自定义列数">
        <hips-radio-group
          v-model="selected5"
          :options="options5"
          :col-num="colNum"
        />        
      </demo-block>
    </div>
    <div v-show="active">
      <demo-block title="基本用法">
        <hips-radio-group :d-field="dsx.records.at(0).getField('selected1')" />      
      </demo-block>

      <demo-block title="设置禁用">
        <hips-radio-group :d-field="dsx.records.at(0).getField('selected2')" />        
      </demo-block>

      <demo-block title="水平排列">
        <hips-radio-group :d-field="dsx.records.at(0).getField('selected3')" />        
      </demo-block>

      <!-- <demo-block title="使用默认插槽">
        <hips-radio-group>
          <hips-radio
            v-for="(option, index) in options4"
            :key="index"
            v-model="selected4"
            :option="option"
          >
            <span>{{ option.text }}</span>
          </hips-radio>
        </hips-radio-group>
      </demo-block> -->

      <demo-block title="自定义列数">
        <hips-radio-group :d-field="dsx.records.at(0).getField('selected5')" />        
      </demo-block>
    </div>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Radio, RadioGroup, Tabs, Tab } from '@hips/vue-ui';
import Dsx from '@hips/plugin-dataset-vuex';

export default {
  components: {
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  mixins: [ BasicView ],
  data() {
    // const _this = this;
    return {
      active: 0,
      selected: '',
      options: [ 'Option1', 'Option2' ],
      selected2: 3,
      options2: [
        {
          label: 'Option1',
          value: 1,
        },
        {
          label: 'Option2',
          value: 2,
        },
        {
          label: 'Option3',
          value: 3,
          disabled: true,
        },
      ],
      selected3: '3',
      options3: [
        {
          label: '1',
          value: '1',
        },
        {
          label: '2',
          value: '2',
        },
        {
          label: '3',
          value: '3',
          disabled: true,
        },
      ],
      selected4: '1',
      options4: [
        {
          label: '1',
          value: '1',
          text: 'Show More',
        },
        {
          label: '2',
          value: '2',
          text: 'And More',
        },
        {
          label: '3',
          value: '3',
          text: 'End More',
          disabled: true,
        },
      ],
      selected5: '6',
      options5: [
        {
          label: '1',
          value: '1',
        },
        {
          label: '2',
          value: '2',
        },
        {
          label: '3',
          value: '3',
          disabled: true,
        },
        {
          label: '4',
          value: '4',
        },
        {
          label: '5',
          value: '5',
        },
        {
          label: '6',
          value: '6',
          disabled: true,
        },
        {
          label: '7',
          value: '7',
        },
        {
          label: '8',
          value: '8',
        },
      ],
      colNum: 4,
      dsx: new Dsx({
        moduleName: 'dsx-radio',
        autoCreate: true,
        fields: [
          {
            name: 'selected1',
            options: [ 'Option1', 'Option2' ],
          },
          {
            name: 'selected2',
            options: [
              {
                label: 'Option1',
                value: 1,
              },
              {
                label: 'Option2',
                value: 2,
              },
              {
                label: 'Option3',
                value: 3,
                disabled: true,
              },
            ],
            iconPosition: 'right',
            defaultValue: 3,
          },
          {
            name: 'selected3',
            options: [
              {
                label: '1',
                value: '1',
              },
              {
                label: '2',
                value: '2',
              },
              {
                label: '3',
                value: '3',
                disabled: true,
              },
            ],
            horizontal: true,
          },
          {
            name: 'selected5',
            options: [
              {
                label: '1',
                value: '1',
              },
              {
                label: '2',
                value: '2',
              },
              {
                label: '3',
                value: '3',
                disabled: true,
              },
              {
                label: '4',
                value: '4',
              },
              {
                label: '5',
                value: '5',
              },
              {
                label: '6',
                value: '6',
                disabled: true,
              },
              {
                label: '7',
                value: '7',
              },
              {
                label: '8',
                value: '8',
              },
            ],
            colNum: 4,
          },
        ],
      }),
    };
  },

  methods: {},
};
</script>

<style lang="stylus"></style>
